<template>
  <div class="subtitle-editor">
    <!-- Actions -->
    <div class="header-actions">
      <span v-if="loading" class="loading-indicator">
        <i class="el-icon-loading"></i> 加载中...
      </span>
      <el-button 
        type="primary" 
        @click="saveSubtitle" 
        :disabled="!filename || loading || saving" 
        :loading="saving"
      >
        保存字幕
      </el-button>
      <el-button 
        type="primary" 
        :loading="isGenerating" 
        :disabled="isGenerating" 
        @click="generateVideo">
        {{ isGenerating ? '生成中...' : '生成视频' }}
      </el-button>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>
    
    <!-- 未选择文件状态 -->
    <div v-else-if="!filename" class="empty-state">
      <el-empty description="请从左侧选择要编辑的字幕文件" />
    </div>
    
    <!-- 编辑器 -->
    <div v-else class="editor-container">
      <el-input
        v-model="subtitleContent"
        type="textarea"
        :rows="28"
        placeholder="字幕内容"
        resize="vertical"
        class="subtitle-textarea"
        ref="textareaRef"
      />
      
      <div class="editor-tips">
        <h4>编辑提示：</h4>
        <ul>
          <li>图片生成后可以填写比分数字，[football_icon:team:id:队标名称:比分数字]</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import footballService from '../services/footballService';

const props = defineProps({
  filename: { // 改为接收 filename 而非 filePath
    type: String,
    default: ''
  },
  isGenerating: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['generate-video']);

// 状态
const subtitleContent = ref('');
const loading = ref(false);
const saving = ref(false);
const textareaRef = ref(null);

// 监听文件名变化
watch(() => props.filename, (newFilename) => {
  if (newFilename) {
    loadSubtitleContent(newFilename);
  } else {
    subtitleContent.value = '';
  }
});

const generateVideo = () => {
  console.log(props)
  if (!props.filename) {
    ElMessage.warning('请先选择字幕文件');
    return;
  }
  emit('generate-video');
};

// 加载字幕内容
const loadSubtitleContent = async (filename) => {
  if (!filename) return;
  
  loading.value = true;
  
  try {
    const result = await footballService.getSubtitleContent(filename);
    
    if (result.success) {
      subtitleContent.value = result.data?.content || '';
      ElMessage.success('字幕内容加载成功');
    } else {
      subtitleContent.value = '';
      ElMessage.error(result.message || '加载字幕内容失败');
    }
  } catch (error) {
    console.error('加载字幕内容失败:', error);
    ElMessage.error(error?.response?.data?.message);
    subtitleContent.value = '';
  } finally {
    loading.value = false;
  }
};

// 保存字幕内容
const saveSubtitle = async () => {
  if (!props.filename) {
    ElMessage.warning('请先选择字幕文件');
    return;
  }
  
  saving.value = true;
  
  try {
    const result = await footballService.saveSubtitleContent(props.filename, subtitleContent.value);
    
    if (result.success) {
      ElMessage.success('字幕保存成功');
    } else {
      ElMessage.error(result.message || '保存字幕失败');
    }
  } catch (error) {
    console.error('保存字幕失败:', error);
    ElMessage.error('保存字幕失败');
  } finally {
    saving.value = false;
  }
};

// 如果初始就有文件名则加载内容
if (props.filename) {
  loadSubtitleContent(props.filename);
}

// 暴露方法给父组件使用
defineExpose({
  insertText(text) {
  const elInput = textareaRef.value;
  if (!elInput) return;

  const textarea = elInput.$el.querySelector('textarea');
  if (!textarea) return;

  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;

  const textBefore = textarea.value.substring(0, startPos);
  const textAfter = textarea.value.substring(endPos);

  const newText = textBefore + text + textAfter;
  textarea.value = newText;
  elInput.$emit('update:modelValue', newText); // Vue 3 的写法

  textarea.selectionStart = startPos + text.length;
  textarea.selectionEnd = startPos + text.length;
  textarea.focus();
}
});
</script>

<style scoped>
.subtitle-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  justify-content: flex-end;
}

.loading-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 14px;
}

.loading-container, .empty-state {
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.editor-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.subtitle-textarea {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
}

.editor-tips {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.editor-tips h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.editor-tips ul {
  margin: 0;
  padding-left: 20px;
}

.editor-tips li {
  margin-bottom: 5px;
  color: #606266;
  font-size: 13px;
}

.editor-tips li:last-child {
  margin-bottom: 0;
}
</style>